<template>
    <view class="supplier-com">
        <view class="s-tit">{{ title }}</view>
        <view class="supplier-inp" @click="supplierFun">
            <text :class="!this.suupInfo.supp_name ? 'is-null' : ''">{{
                this.suupInfo.supp_name || "请选择供货单位"
            }}</text>
        </view>
        <el-dialog
            title="选择供货单位"
            :visible.sync="dialogSupplier"
            width="800px"
        >
            <view class="from-box">
                <el-form ref="form" :model="supplierForm">
                    <el-form-item>
                        <el-select
                            v-model="supplierForm.category"
                            placeholder="类别"
                            class="w-180"
                        >
                            <el-option
                                v-for="item in categoryData"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="10px">
                        <el-select
                            v-model="supplierForm.sort"
                            placeholder="排序"
                            class="w-180"
                        >
                            <el-option
                                v-for="item in sortData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="10px">
                        <el-select
                            v-model="supplierForm.handler"
                            placeholder="经手人"
                            class="w-180"
                        >
                            <el-option
                                v-for="item in handlerData"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="10px">
                        <el-button type="primary" @click="searchVendor"
                            >搜索</el-button
                        >
                    </el-form-item>
                    <el-form-item label-width="10px">
                        <el-button @click="resetList">重置</el-button>
                    </el-form-item>
                </el-form>
            </view>
            <view class="table-box">
                <!-- <view v-for="(item, index) in supplierData" :key="index">{{
                    item.name + item.company
                }}</view> -->
                <el-table
                    :data="supplierData"
                    class="supplierList"
                    align="center"
                    @row-click="selectVendor"
                    v-infinite-scroll="loadFun"
                >
                    <el-table-column width="200" label="供货商" align="center">
                        <template slot-scope="scope">
                            <text>{{
                                `${scope.row.name}${
                                    scope.row.company
                                        ? "-" + scope.row.company
                                        : ""
                                }`
                            }}</text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="cellphone"
                        label="手机号"
                        width="200"
                        align="center"
                    ></el-table-column>
                    <el-table-column :label="th_title" align="center">
                        <template slot-scope="scope">
                            <text>{{ scope.row.value || "无" }}</text>
                        </template></el-table-column
                    >
                </el-table>
            </view>
        </el-dialog>
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";
import https from "../../js/https/Https.js";
import goodsCtrl from "../../js/gd/GoodsCtrl.js";

export default {
    name: "supplierCom",
    props: ["suupInfo"],
    data() {
        return {
            title: lang.supplierCom.title,
            dialogSupplier: false,
            supplierForm: {
                category: "all",
                sort: "",
                handler: "0",
            },
            th_title: "",
            categoryData: [],
            sortData: [],
            handlerData: [],
            supplierData: [],
            pfrom: -20,
            is_soll: false,
        };
    },
    computed: {},
    watch: {},
    // created() {
    //     this.getcgSuppList();
    // },

    methods: {
        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.pfrom += 20;
            this.getcgSuppList();
        },
        // 定义标题
        demandName(val) {
            if (val == 0) {
                this.th_title = "加入时间";
            } else if (val == 1) {
                this.th_title = "创建时间";
            } else if (val == 2) {
                this.th_title = "交易额度";
            } else if (val == 3) {
                this.th_title = "交易单数";
            } else if (val == 4) {
                this.th_title = "交易时间";
            }
        },
        // 选中某个供货商
        selectVendor(row) {
            this.suupInfo.supp_name = row.name;
            this.dialogSupplier = false;
            goodsCtrl.setSupplier(row);
        },
        // 触发弹框
        supplierFun() {
            this.dialogSupplier = true;
        },
        // 搜索供货商
        searchVendor() {
            this.pfrom = 0;
            this.supplierData = [];
            this.is_soll = false;
            this.getcgSuppList();
        },
        // 重置供应商
        resetList() {
            this.supplierForm = {
                category: "all",
                handler: "0",
                sort: "3",
            };
            this.pfrom = 0;
            this.supplierData = [];
            this.is_soll = false;
            this.getcgSuppList();
        },
        // 获取供货商列表
        async getcgSuppList() {
            let data = {
                typeid: this.supplierForm.category || undefined,
                uid_cp: this.supplierForm.handler || undefined,
                orderby: this.supplierForm.sort || undefined,
                pfrom: this.pfrom,
                pnum: 20,
            };
            const res = await https.cgSuppList(data);
            if (this.categoryData.length == 0) {
                this.categoryData = res.data.custype_ls || [];
                this.categoryData.unshift({
                    id: "all",
                    title: "全部分类",
                });
                this.categoryData.push({
                    id: "0",
                    title: "未分类",
                });
            }
            if (this.sortData.length == 0) {
                this.sortData = res.data.order_ls || [];
                this.sortData.map((v) => {
                    if (v.is_ck == 1) {
                        this.supplierForm.sort = v.id;
                    }
                });
            }
            if (this.handlerData.length == 0) {
                this.handlerData = res.data.staff_ls || [];
                this.handlerData.unshift({
                    id: "0",
                    title: "全部经手人",
                });
            }
            this.demandName(this.supplierForm.sort);
            if (res.data.supp_ls) {
                res.data.supp_ls.map((v) => {
                    this.supplierData.push(v);
                });
            } else {
                this.is_soll = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.supplier-com {
    margin: 15px 0;
    font-size: 13px;
    .s-tit {
        font-weight: bold;
    }
    .supplier-inp {
        margin-top: 10px;
        width: 288px;
        height: 31px;
        border: 1px #ececec solid;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
        .is-null {
            color: #aaaaaa;
        }
    }
    ::v-deep.supplierList {
        height: 500px;
        overflow-y: scroll;
        .el-table__body {
            .el-table__row {
                cursor: pointer;
            }
        }
    }

    ::v-deep.from-box {
        .el-form {
            display: flex;
        }
    }
    ::v-deep.table-box {
        margin-bottom: 20px;
    }
    .w-180 {
        width: 180px;
    }
}
</style>